<template>
  <div class="box">
    <van-nav-bar
      fixed
      placeholder
      safe-area-inset-top
      title="账号与安全"
      @click-left="back"
    >
      <template #left>
        <van-icon name="arrow-left" size="16px" color="#333" />
      </template>
    </van-nav-bar>
    <div>
      <van-cell size="large" title="手机号" is-link to="phone" />
      <van-cell size="large" title="微信" is-link to="wchat" />
      <van-cell size="large" title="实名认证" is-link to="realname" />
    </div>
    <div class="btn">
      <van-button @click="show = true">注销账号</van-button>
    </div>

    <van-action-sheet
      v-model="show"
      :actions="actions"
      cancel-text="取消"
      description="注销后账号不可恢复，请谨慎操作"
      close-on-click-action
      @select="onSelect"
    />
  </div>
</template>

<script>
import { logOff } from "../../apis/user.js";
import local from "../../utils/local.js";
import { getUserInfo } from "../../apis/user.js";
import { getUserId } from "@/utils/auth";
export default {
  data() {
    return {
      show: false,
      actions: [{ name: "注销账户" }],
      userId: "",
    };
  },
  created() {
    this.userId = getUserId() ? getUserId() : "";
    const userId = getUserId();
    if (userId) {
      this.$store.dispatch("manage/getInfo", { userId: this.userId });
      getUserInfo({ userId: this.userId }).then((res) => {
        local.set("userInfo", JSON.stringify(res.result));
      });
    } else {
      this.$router.push({ path: "/home/index" });
    }
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    onSelect() {
      const _this = this;
      this.show = false;
      this.$dialog
        .confirm({
          title: "注销账号",
          message: "您确认要注销账号吗？",
        })
        .then(() => {
          logOff().then((res) => {
            if (res.code === 200) {
              _this.$store.dispatch("manage/logout");
              _this.$toast.success("注销成功");
              _this.$router.push({ path: "/login" });
            } else {
              _this.$toast("注销失败");
            }
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  height: 100%;
  background-color: #eee;
  .btn {
    text-align: center;
    position: fixed;
    bottom: 40px;
    width: 92%;
    margin: 0 15px;
    .van-button {
      display: block;
      width: 100%;
      font-size: 16px;
    }
  }
}
</style>
